import React, { useState, useEffect } from 'react';
import { RankStyled } from './style';
import { BorrowDetail } from '@/services/types';
import { GetBorrowDetails } from '@/services/index';
type RankPropsType = {

};

export type ListType = { rank: number; name: string; number: number };

const Rank: React.FC<RankPropsType> = () => {
  const [total, setTotal] = useState<number>(0); // 总条数
  const [curList, setCurList] = useState<BorrowDetail[]>([]); // 当前显示条数
  // const [pageIndex, setPageIndex] = useState<number>([]);
  let timer: any = null;

  function roll(t: any) {
    var ul1 = document.getElementById("comment1");
    var ul2 = document.getElementById("comment2");
    var ulbox = document.getElementById("review_box");
    if (ul1 != null && ulbox) {
      ul1.innerHTML;
      ulbox.scrollTop = 0;
    }

    rollStart(t);
  }
  function rollStart(t: any) {
    var ul1 = document.getElementById("comment1");

    var ulbox = document.getElementById("review_box");
    rollStop();
    timer = setInterval(() => {
      // 当滚动高度大于列表内容高度时恢复为0
      if (ulbox && ul1) {
        if (ulbox.scrollTop >= (ul1.scrollHeight - ulbox.clientHeight)) {
          ulbox.scrollTop = 0;
        } else {
          ulbox.scrollTop++;
        }
      }


    }, t);
  }
  function rollStop() {
    clearInterval(timer);
  }




  function getBorrowData(page: any) {
    GetBorrowDetails(page).then(res => {
      //   const data =[
      //     {
      //         "securityClassification": "null",
      //         "title": "中电二建文书档案",
      //         "borrowUserName": "Administrator",
      //         "creationTime": "2024-04-17T11:24:51",
      //         "borrowState": "2",
      //         "id": "3",
      //         "borrowStateName": "待审核"
      //     },
      //     {
      //         "securityClassification": "null",
      //         "title": "中电二建文书档案",
      //         "borrowUserName": "Administrator",
      //         "creationTime": "2024-04-17T11:23:41",
      //         "borrowState": "2",
      //         "id": "2",
      //         "borrowStateName": "待审核"
      //     },
      //     {
      //         "securityClassification": "null",
      //         "title": "测试借阅",
      //         "borrowUserName": "Administrator",
      //         "creationTime": "2024-04-11T11:45:48",
      //         "borrowState": "5",
      //         "id": "1",
      //         "borrowStateName": "超期"
      //     }
      //     ,
      //     {
      //         "securityClassification": "null",
      //         "title": "测试借阅",
      //         "borrowUserName": "Administrator",
      //         "creationTime": "2024-04-11T11:45:48",
      //         "borrowState": "5",
      //         "id": "1",
      //         "borrowStateName": "超期"
      //     }
      //     ,
      //     {
      //         "securityClassification": "null",
      //         "title": "测试借阅",
      //         "borrowUserName": "Administrator",
      //         "creationTime": "2024-04-11T11:45:48",
      //         "borrowState": "5",
      //         "id": "1",
      //         "borrowStateName": "超期"
      //     }
      //     ,
      //     {
      //         "securityClassification": "null",
      //         "title": "测试借阅",
      //         "borrowUserName": "Administrator",
      //         "creationTime": "2024-04-11T11:45:48",
      //         "borrowState": "5",
      //         "id": "1",
      //         "borrowStateName": "超期"
      //     }
      //     ,
      //     {
      //         "securityClassification": "null",
      //         "title": "测试借阅",
      //         "borrowUserName": "Administrator",
      //         "creationTime": "2024-04-11T11:45:48",
      //         "borrowState": "5",
      //         "id": "1",
      //         "borrowStateName": "超期"
      //     }
      //     ,
      //     {
      //         "securityClassification": "null",
      //         "title": "测试借阅",
      //         "borrowUserName": "Administrator",
      //         "creationTime": "2024-04-11T11:45:48",
      //         "borrowState": "5",
      //         "id": "1",
      //         "borrowStateName": "超期"
      //     }
      //     ,
      //     {
      //         "securityClassification": "null",
      //         "title": "测试借阅",
      //         "borrowUserName": "Administrator",
      //         "creationTime": "2024-04-11T11:45:48",
      //         "borrowState": "5",
      //         "id": "1",
      //         "borrowStateName": "超期"
      //     }
      // ]
      setTotal(res?.total || 0)
      setCurList(res?.data || []);
    });
  }

  useEffect(() => {
    getBorrowData({ pageIndex: 1, pageSize: 8 });
  }, []);
  // 切换当前页
  const pageChange = (curPage: number) => {
    getBorrowData({ pageIndex: 1, pageSize: 8 });
  };
  function formaData(str: any) {

    const timer = new Date(str);
    const year = timer.getFullYear()
    const month = timer.getMonth() + 1 // 由于月份从0开始，因此需加1
    const day = timer.getDate()
    const hour = timer.getHours()
    const minute = timer.getMinutes()
    const second = timer.getSeconds()
    return `${pad(year, 4)}-${pad(month)}-${pad(day)}`
  }
  function pad(timeEl: any, total = 2, str = '0') {
    return timeEl.toString().padStart(total, str)
  }


  return (
    <RankStyled>
      <div className='borrowTable'>
        <table style={{ "width": "100%", "margin": "0px 0px" }}>
          <thead className='thead' >
            <tr>
              <td width="160"><span style={{ "width": "160px" }}>题名</span></td>
              <td width='40'><span style={{ "width": "40px" }}>密级</span></td>
              <td width='60'><span style={{ "width": "60px" }}>借阅人</span></td>
              <td width='40'><span style={{ "width": "40px" }}>状态</span></td>
              <td width='100'><span style={{ "width": "100px" }}>时间</span></td>
            </tr>
          </thead>
          <tbody>
            {curList.map((item) => (
              <tr key={item.id}>
                <td width="160"><span style={{ "width": "160px" }}>{item.title}</span></td>
                <td width='40'> <span style={{ "width": "40px" }}>{item.securityClassification == 'null' ? '' : item.securityClassification} </span></td>
                <td width='60'> <span style={{ "width": "60px" }}>{item.borrowUserName}</span></td>
                <td width='40'>
                  {
                    item.borrowStateName === '待审核' && <span style={{ "width": "40px", color: '#FFFF00' }}>{item.borrowStateName}</span>
                  }
                  {
                    item.borrowStateName === '待发放' && <span style={{ "width": "40px", color: '#FF7F00' }}>{item.borrowStateName}</span>
                  }
                  {
                    item.borrowStateName === '借阅中' && <span style={{ "width": "40px", color: '#00FF00' }}>{item.borrowStateName}</span>
                  }
                  {
                    item.borrowStateName === '超期' && <span style={{ "width": "40px", color: '#FF0000' }}>{item.borrowStateName}</span>
                  }
                  {
                    item.borrowStateName === '已完成' && <span style={{ "width": "40px", color: '#fff' }}>{item.borrowStateName}</span>
                  }
                </td>
                <td width='100'> <span style={{ "width": "100px" }}>{formaData(item.creationTime)}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {/* <div className='rank-footer'>
        <MyPagination total={total} pageChange={pageChange} />
      </div> */}
    </RankStyled>
  );
};

export default Rank;
